/**
 * 标准页面 布局示例
 * ================================================================
 * <PageContainer>
 *   // 标题 和 面包屑会自动出来
 *   <div className="pagehead-searchbar">  
 *     // 搜索栏是一个横向排布的Form
 *     <Form
 *       layout="inline" // 从左到右排布搜索field
 *       ref={this.searchFormRef} // 设置搜索Form的ref，从而获取搜索Form的内容
 *     >
 *       // 放置搜索input
 *     </Form>
 *   </div>
 * 
 *   // 页面内容区
 *   <div className="ourCard">
 *     <div className="header">
 *       <div className="title">表格标题</div>
 *       <div className="toolbtn">
 *         // 表格右上角的按钮
 *       </div>
 *     </div>
 *     <div className="content">
 *       // Antd表格，通过属性设置实现表格显示
 *       <Table> 
 *     </div>
 *   </div>
 * </PageContainer>
 * ================================================================
 */

// 页面容器
import { PageContainer } from "@ant-design/pro-layout";
// react组件
import React, { Component, createRef } from "react";
// Antd组件
import {
  Table, Button, message, Select, Form, Input, Modal, DatePicker, Space, Tag
} from "antd";
// 时间戳转换
import moment from "moment";
// 数据接口
import { createNewData, listTableData } from "@/services/pagedemo.js";
// 通用的常量
import { storageOptions } from "@/consts/consts";

const { Option } = Select;

// 页面class
class PageDemo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      total: 0, // 记录总数
      currentPage: 1, // 当前页码
      size: 10, // 每页显示记录数量
      dataSource: [], // 数据源data
      query: 0, // 查询条件
      isReady: false, // 表格数据是否ready
      demoFormVisible: false, // 表单隐藏状态
      curEditRecord: null, // 正在编辑的记录的，若为null则弹窗表单为新建记录
    };

    // 定义Antd表格的列结构
    this.tableColumns = [
      {
        title: "id", // 列标题
        dataIndex: "key", // Antd table中用到的index
        key: "key", // 显示数据源哪个key的值
        width: 50, // 列宽度，不赋值会自动分布表格宽度
        render: (text, record, index) => { // 数据值如何显示
          // 表格显示的id字段只是一个序号，并未在数据库中存储，自动计算记录的序号并显示
          const { currentPage } = this.state;
          return (currentPage - 1) * 10 + index + 1;
        }
      },
      {
        title: "客户姓名",
        dataIndex: "name",
        key: "name",
        width: 200
      },
      {
        title: "客户租期",
        dataIndex: "rent",
        key: "rent",
        render: (text, record, index) => `${record.rent.val} ${record.rent.unit}`
      },
      {
        title: "客户生日",
        dataIndex: "birth",
        key: "birth",
        width: 200,
        render: (text, record, index) =>  moment.unix(text).format("YYYY-MM-DD HH:MM:SS")
      },
      {
        title: "客户标签",
        key: "tags",
        dataIndex: "tags",
        render: (tags) => tags.join(" ")
      },
      {
        title: "操作",
        key: "action",
        width: 200,
        render: (text, record, index) => (
          <Space size="middle">
            <a onClick={() => this.editRecord(record)}>编辑</a>
            <a onClick={() => this.deleteRecord(record)}>删除</a>
          </Space>
        )
      }
    ];

    this.searchFormRef = createRef();
    this.demoFormRef = createRef();

  }

  // 页面加载时触发获取数据
  componentDidMount() {
    this.fetchTableData().finally(() => this.setState({ isReady: true }));
  }

  // 获取表格数据
  fetchTableData = async () => {
    // 页码，请求记录数
    const { size, currentPage } = this.state;
    // 搜索条件
    const { name } = this.getSearchFormValue();

    // 获取数据
    const {
      data: { ret },
      data: {
        data: { list, total, query }
      }
    } = await listTableData({ size, page: currentPage, name: name });

    if (ret !== 0) {
      return;
    }
    this.setState({ total, dataSource: list, query });
  };

  // 翻页
  handlePageChange = (page, size) => {
    this.setState({ currentPage: page, size }, this.fetchTableData);
  };

  // 新建记录
  createRecord = () => {
    this.setState({
      curEditRecord: null, // 设置为null表示弹窗表单为新建记录
      demoFormVisible: true, // 显示弹窗表单
    });
    // 设置弹窗表单的缺省值
    this.demoFormRef.current.setFieldsValue({
      rent_unit: "周"
    })    
  };

  // 编辑记录
  editRecord = (record) => {
    // 时间戳转为moment 从而可设置Antd的TimePicker的默认值
    record.birth = moment.unix(record.birth)
    // 租期在界面中拆成了 数值 和 单位，通过rent_val控制input的默认值
    record.rent_val = record.rent.val
    record.rent_unit = record.rent.unit

    this.setState({
      curEditRecord: record, // 设置为当前正在编辑的记录
      defuUnit: record.rent.unit, // 设置当前记录的租期的单位
      demoFormVisible: true, // 显示弹窗表单
    })

    console.log(record)
    // 设置弹窗表单的缺省值
    this.demoFormRef.current.setFieldsValue(record)
  };


  changeTenantStatus = (id) => {
    // todo
  };

  // 删除记录
  deleteRecord = (record) => {
    alert(`正在删除的记录id为：${record.key}`);
  };

  // 批量删除记录
  batchDelRecord = () => {
    alert("batch delete records");
  };

  resetFliter = () => {
    // todo
  };

  search = () => {
    this.fetchTableData();
  };

  getSearchFormValue = () => {
    const { getFieldsValue } = this.searchFormRef.current;
    const { name } = getFieldsValue();
    return { name };
  };


  // 新建或编辑后的保存处理
  saveRecord = (type) => {
    // 获取表单数据
    const { getFieldsValue } = this.demoFormRef.current;
    const { name, rent, birth, tags } = getFieldsValue();

    if (type === "new") {
      // 调用service服务创建数据
      createNewData({
        name: name,
        rent: rent,
        birth: birth.unix(), // 转换为时间戳
        tags: tags
      }).then((res) => {
        if (res.data.ret === 0) {
          message.success("创建成功！");
          this.setState({
            demoFormVisible: false
          });
        } else {
          message.success("创建失败");
        }
      });
    } else {
      // 调用service服务创建数据
      updateData({
        id: "8888",
        data: {
          name: name,
          rent: rent,
          birth: birth.unix(), // 转换为时间戳
          tags: tags
        }
      }).then((res) => {
        if (res.data.ret === 0) {
          message.success("更新成功！");
          this.setState({
            demoFormVisible: false
          });
        } else {
          message.success("更新失败");
        }
      });

    }
  };

  /** Form弹窗示例：简单的弹窗表单，字段平铺，样式已按照UI定制 */
  renderFormModal = () => {
    const { demoFormVisible, curEditRecord, defUnit } = this.state;
    // 构建input后缀AddonAfter，通过value可以设置下拉的默认值
    const selectAfterDateUnit = (
      <Select className="select-after" name="rent_unit">
        <Option value="月">月</Option>
        <Option value="周">周</Option>
        <Option value="天">天</Option>
      </Select>
    );
    
    return (
      <Modal
        centered
        title="新建记录"
        visible={demoFormVisible}
        forceRender={true} // forceRender={true} 表示强制渲染 这样当modal关闭的时候 也能访问到modal中的form表单
        onOk={() => {
          if (curEditRecord){
            this.saveRecord("edit")
          } else {
            this.saveRecord("new")}
        }}
        onCancel={() => this.setState({ demoFormVisible: false })}
      >
        <Form ref={this.demoFormRef}>
          <Form.Item
            name="name"
            label="客户名称："
            rules={[{ required: true, message: "请输入客户名称" }]}
          >
            <Input placeholder="请输入" />
          </Form.Item>

          <Form.Item
            name="rent_val"
            label="客户租期："
            rules={[{ required: true, message: "请选择租期" }]}
          >
            <Input type="number" addonAfter={selectAfterDateUnit} placeholder="请输入数字" />
          </Form.Item>

          <Form.Item
            name="birth"
            label="客户生日"
            rules={[{ required: true, message: "请选择客户生日" }]}
          >
            <DatePicker placeholder="请选择" />
          </Form.Item>

          <Form.Item
            name="tags"
            label="客户标签"
            rules={[{ required: true, message: "请选择租户等级" }]}
          >
            <Select mode="multiple" allowClear  placeholder="请选择">
              {storageOptions}
            </Select>
          </Form.Item>
        </Form>
      </Modal>
    );
  };

  render() {
    const {
      total, dataSource, currentPage, isReady, size, query
    } = this.state;

    return (
      /**
       * 最外层的容器必须是PageContaine
       * - title不用管，自动根据routers.ts里面的name出现在页面
       * - 设置footer属性可以出现页面底部的toolbar（fix bottom风格）
       */
      <PageContainer>
        {/* 页面header区域：搜索栏 区域 */}
        <div className="pagehead-searchbar">
          {/* 搜索栏是一个多个field组成的form，每个field有label和搜索框，搜索框根据field类型书写对应的input类型 */}
          <Form
            layout="inline" // 从左到右排布搜索field
            ref={this.searchFormRef} // 设置搜索form的ref，从而获取搜索Form的内容
          >
            {/* 这里书写可以搜索的field，书写filed对应的input类型 */}
            <Form.Item name="mat_name" label="原料名称">
              <Input placeholder="请输入关键字" />
            </Form.Item>

            <Form.Item name="mat_brand" label="原料品牌">
              <Input placeholder="请输入关键字" />
            </Form.Item>

            <Form.Item>
              <Button type="default">重置</Button>
              <Button type="primary">提交</Button>
            </Form.Item>
          </Form>
        </div>

        <div className="ourCard">
          <div className="header">
            <div className="title">表格标题</div>
            <div className="toolbtn">
              <Button
                type="primary"
                onClick={() => {
                  this.createRecord();
                }}
              >
                新建记录
              </Button>
              <Button type="default">批量删除</Button>
            </div>
          </div>

          <div className="content">
            <Table
              columns={this.tableColumns} // 表格的列定义
              dataSource={dataSource} // 装载获取的数据到表格内
              loading={!isReady} // 获取数据时的页面转轮
              rowSelection={{ type: "checkbox" }} // 行首的选择框方式
              pagination={{ position: ["bottomRight"], defaultCurrent: 1, total: total }} // 分页器的样式
            />
          </div>
        </div>
        {/* 新建，编辑等缺省不可见的表单 */ this.renderFormModal()}
      </PageContainer>
    );
  }
}

export default PageDemo;
